<template>
    <div>
        <Header></Header>
        <div style="width: 850px;display: inline-block; margin:0px auto;">

            <!-- 面包屑导航 -->
            <div class="nav-wrap">
                <p class="nav-p-pc" style="margin-top:25px;text-align:left;">
                    <a href="#">课程列表</a>
                    <span class="sharp-content"> &gt; </span>
                    <span class="nav-sec">账号设置</span>
                </p>
            </div>

            <div class="container">
                <div class="left-content">
                    <div class="label-item" @click="changeItem('set')"
                         v-bind:class="{'label-active':selItem==='set'}">
                        基本设置
                    </div>
                    <div class="label-item" @click="changeItem('bind')"
                         v-bind:class="{'label-active':selItem==='bind'}">
                        账号绑定
                    </div>
                    <div class="label-item" @click="changeItem('pwd')"
                         v-bind:class="{'label-active':selItem==='pwd'}">
                        修改密码
                    </div>
                </div>

                <div class="right-content">
                    <div v-if="selItem==='set'">
                        <el-form label-position="top" align="left" :model="user">
                            <el-form-item label="头像">
                                <img :src="user.content.portrait" style="height:90px;width:90px;border-radius: 45px"/>
                                <el-upload
                                        action="http://localhost:80/user/upload"
                                        :multiple="false"
                                        :show-file-list="false"
                                        :on-success="uploadHandle">
                                    <el-button size="small" type="default">
                                        <i class="el-icon-upload2"></i>
                                        更换头像
                                    </el-button>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="昵称">
                                <el-input v-model="user.content.name"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="default" class="update-info" @click="onSubmit">更新信息</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
        <Footer></Footer>

        <!-- 修改密码框 -->
        <el-dialog
                title="修改密码"
                align="left"
                :visible.sync="dialogVisible"
                width="35%">
            <el-form label-position="left" label-width="80px" status-icon
                     :rules="pwdRules" :model="userPwd" ref="userPwd">
                <el-form-item label="当前密码" prop="oldPassword">
                    <el-input type="password" v-model="userPwd.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input type="password" v-model="userPwd.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPassword">
                    <el-input type="password" v-model="userPwd.checkPassword"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="default" style="background: #00b38a;color: #fff0ff;"
                           @click="changePwd">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

    // 初始导入顶部登录条 和底部 登陆条
    import Header from "@/components/Header/Header"; //顶部登录条
    import Footer from "@/components/Footer/index"; //顶部登录条


    export default {
        name: "Index",
        components: {
            Header,
            Footer,
        },
        data() {
            // 确认密码校验
            var validatePass = (rule, value, callback) => {
                console.log(this);
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.userPwd.newPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                user: {},
                selItem: 'set',
                dialogVisible: false,
                userPwd: {
                    oldPassword: "",
                    newPassword: "",
                    checkPassword: ""
                },
                // 密码的设定规则与判断
                pwdRules: {
                    oldPassword: [
                        {required: true, message: '请输入当前密码', trigger: 'blur'},
                        {min: 6, message: '密码长度不能低于6位', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请输入新的密码', trigger: 'blur'},
                        {min: 6, message: '密码长度不能低于6位', trigger: 'blur'}],
                    checkPassword: [
                        {required: true, message: '请输入新的密码', trigger: 'blur'},
                        {min: 6, message: '密码长度不能低于6位', trigger: 'blur'},
                        {validator: validatePass, trigger: 'blur'}]
                }
            };
        },
        // 钩子函数，在内存中获取到用户对象
        created() {
            console.log("user = " + this.user);
            this.user = JSON.parse(localStorage.getItem("user"));
            if (this.user == null) {
                this.$router.push("/")
            }
            console.log("用户的ID为：" + this.user.content.id);
        },
        methods: {
            // 返回的方法
            cancel() {
                this.dialogVisible = false;
                this.selItem = 'set';
            },
            // 改变选择
            changeItem(item) {
                this.selItem = item;
                if (item === 'pwd') {
                    this.dialogVisible = true;
                }
            },

            // 根据返回值中包含的状态信息来进行图片  fileId的赋值
            uploadHandle(resp, file, fileList) {
                console.log(resp);
                if (resp.state === 200) {
                    console.log("111111111111");
                    this.user.content.portrait = resp.fileId;
                    this.$message.success(resp.message);
                } else {
                    this.$message.error(resp.message);
                }
            },
            
            // 与后端进行联调， 更新用户的信息，更新用户头像与昵称
            onSubmit() {
                console.log(this.user);
                this.axios.post("http://localhost:80/user/updateUserInfo", {
                    userid: this.user.content.id,
                    name: this.user.content.name,
                    portrait: this.user.content.portrait
                }).then(resp => {
                    if (resp.data.state === 200) {
                        localStorage.setItem("user", JSON.stringify(this.user));
                        this.$message.success(resp.data.message);
                    } else {
                        this.$message.error(resp.data.message);
                    }
                });
            },
            // 修改密码的方法，与后端进行联调， 最后根据返回值来
            changePwd() {
                this.$refs.userPwd.validate((valid) => {
                    if (valid) {
                        // 提交修改申请
                        this.axios.post("http://localhost:80/user/updatePassword", {
                            userid: this.user.content.id,
                            phone: this.user.content.phone,
                            oldPassword: this.userPwd.oldPassword,
                            password: this.userPwd.newPassword
                        }).then(resp => {
                            if (resp.data.state === 200) {
                                this.$refs.userPwd.resetFields();
                                this.$message.success(resp.data.message);
                                this.selItem = 'set';
                                this.dialogVisible = false;
                            } else {
                                this.$message.error(resp.data.message);
                            }
                        });
                    }
                });
            }
        },
    };
</script>

<style lang="less" scoped>
    @import "../assets/less/common.less";

    .container {
        margin: 30px auto 0;
        height: 400px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }

    .left-content {
        width: 234px;
        height: 100%;
        border-right: 1px solid #eee;

        .label-item {
            height: 39px;
            line-height: 39px;
            text-align: right;
            padding-right: 62px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #555;
            cursor: pointer;
        }

        .label-active {
            border-right: 2px solid #00b38a;
            color: #00b38a;
            -webkit-transform: translateX(1.5px);
            transform: translateX(1.5px);
        }
    }

    .right-content {
        width: 580px;
        height: 100%;
        margin-left: 50px;

        .update-info {
            background: #00b38a;
            color: #fff0ff;
        }

        .label-pwd {
            margin-top: 12px;
            width: 71%;
            height: 56px;
            box-sizing: border-box;

            .main-title {
                height: 30px;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                justify-content: space-between;

                .title-left {
                    height: 30px;
                    font-size: 18px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #333;
                    line-height: 30px;
                }

                .title-right {
                    height: 30px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #5580c8;
                    line-height: 30px;
                    cursor: pointer;
                }
            }

            .sub-title {
                height: 26px;
                font-size: 14px;
                font-family: HiraginoSansGB-W3, HiraginoSansGB;
                font-weight: 400;
                color: #555;
                line-height: 26px;
                float: left;
            }
        }
    }
</style>